<template>
  <div>
    <!-- 搜索区域 -->
    <a-form layout="horizontal">
      <a-row>
        <div>
          <!-- 搜索区域 -->
          <a-form layout="horizontal">
            <a-row>
              <div>
                <a-col :md="12" :sm="24">
                  <a-form-item
                    label="名称"
                    :labelCol="{span: 4}"
                    :wrapperCol="{span: 18, offset: 2}">
                    <a-input v-model="itemName"/>
                  </a-form-item>
                </a-col>
                <a-col :md="12" :sm="24">
                  <a-form-item
                    label=""
                    :labelCol="{span: 4}"
                    :wrapperCol="{span: 18, offset: 1}">
                <span style="padding-top: 3px;margin-left: 20px;">
                  <a-button type="primary" @click="listData">查询</a-button>
                  <a-button style="margin-left: 8px" @click="itemName = ''">重置</a-button>
                </span>
                  </a-form-item>
                </a-col>
              </div>
            </a-row>
          </a-form>
        </div>
      </a-row>
    </a-form>
    <div class="operator">
      <a-button type="primary" ghost @click="add">新增</a-button>
      <a-button @click="batchDelete">删除</a-button>
    </div>
    <a-table ref="TableInfo"
             :columns="columns"
             :dataSource="data"
             :pagination="pagination"
             :loading="loading"
             @change="handleTableChange"
             :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
    >
      <template slot="image" slot-scope="text, record">
        <img :src="record.image" style="width: 50px;">
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)" title="修改用户"></a-icon>
        <a-icon type="eye" theme="twoTone" twoToneColor="#42b983" @click="view(record)" title="查看"></a-icon>
      </template>
    </a-table>
    <!-- 信息查看 -->
    <user-info
      :userInfoData="userInfo.data"
      :userInfoVisiable="userInfo.visiable"
      @close="handleInfoClose">
    </user-info>
    <!-- 新增 -->
    <user-add
      @close="handleAddClose"
      @success="handleAddSuccess"
      :userAddVisiable="userAdd.visiable">
    </user-add>
    <!-- 修改 -->
    <user-edit
      ref="userEdit"
      @close="handleEditClose"
      @success="handleEditSuccess"
      :userEditVisiable="userEdit.visiable">
    </user-edit>
  </div>
</template>

<script>
  import UserAdd from './UserAdd'
  import UserEdit from './UserEdit'
  import UserInfo from './UserInfo'

  export default {
    components: {UserInfo, UserAdd, UserEdit},
    data() {
      return {
        data: [],
        itemName: '',
        searchList: [],
        resultList: [],
        foodList: [],
        currentKey: '',
        loading: false,
        selectedRowKeys: [],
        userInfo: {
          visiable: false,
          data: {}
        },
        userAdd: {
          visiable: false
        },
        userEdit: {
          visiable: false
        },
        columns: [
          {title: '编号', dataIndex: 'itemid', ellipsis: true},
          {title: '名称', dataIndex: 'itemName', ellipsis: true},
          {title: '备注', dataIndex: 'remark'},
          {
            title: '图片', dataIndex: 'image',
            scopedSlots: {customRender: 'image'}
          },
          {title: '情况', dataIndex: 'status'}, {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: {customRender: 'operation'}
          }
        ],
        pagination: {
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          defaultCurrent: 1,
          defaultPageSize: 10,
          showSizeChanger: true,
          showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
        }
      }
    },
    methods: {
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
        console.log(selectedRowKeys)
      },
      add() {
        this.userAdd.visiable = true
      },
      edit(record) {
        this.$refs.userEdit.setFormValues(record)
        this.userEdit.visiable = true
      },
      view(record) {
        this.userInfo.data = record
        this.userInfo.visiable = true
      },
      batchDelete() {
        if (!this.selectedRowKeys.length) {
          this.$message.warning('请选择需要删除的记录')
          return
        }
        let that = this
        this.$confirm({
          title: '确定删除所选中的记录?',
          content: '当您点击确定按钮后，这些记录将会被彻底删除',
          centered: true,
          onOk() {
            let userIds = []
            for (let key of that.selectedRowKeys) {
              userIds.push(that.data[key].itemid)
            }
            that.$delete('item/' + userIds.join(',')).then(() => {
              that.$message.success('删除成功')
              that.selectedRowKeys = []
              that.listData()
            })
          },
          onCancel() {
            that.selectedRowKeys = []
          }
        })
      },
      handleTableChange(pagination) {
        this.paginationInfo = pagination
        this.listData(this.currentKey)
      },
      handleInfoClose() {
        this.userInfo.visiable = false
      },
      handleAddClose() {
        this.userAdd.visiable = false
      },
      handleAddSuccess() {
        this.userAdd.visiable = false
        this.$message.success('添加成功')
        this.listData()
      },
      handleEditClose() {
        this.userEdit.visiable = false
      },
      handleEditSuccess() {
        this.userEdit.visiable = false
        this.$message.success('修改成功')
        this.listData()
      },
      listData() {
        let params = {}
        if (this.paginationInfo) {
          // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
          this.$refs.TableInfo.pagination.current = this.paginationInfo.current
          this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
          params.pageSize = this.paginationInfo.pageSize
          params.pageNum = this.paginationInfo.current
        } else {
          // 如果分页信息为空，则设置为默认值
          params.pageSize = this.pagination.defaultPageSize
          params.pageNum = this.pagination.defaultCurrent
        }
        this.$get('item/item/list', {
          ...params,
          itemName: this.itemName
        }).then((r) => {
          this.data = r.data.rows
          console.log(this.data)
          const pagination = {...this.pagination}
          pagination.total = r.data.total
          this.pagination = pagination
          // 数据加载完毕，关闭loading
          this.loading = false
        })
      }
    },
    mounted() {
      this.listData()
    }
  }
</script>

<style scoped>

</style>
